<template>
    <div class="contentWeb clear">
        <div class="member_menu">
            <Personleft active="yixiang"/>
        </div>
        <div class="member_right ">
            <div class="personTengt">
                <Memtitle name="求职意向"/>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px">
                    <el-form-item required label="期望薪资" style="margin-top: 30px;">
                        <el-select v-model="form.wageType" placeholder="请选择">
                            <el-option label="月薪" value="月薪"></el-option>
                            <el-option label="年薪" value="年薪"></el-option>
                        </el-select>
                        <el-input placeholder="最低" v-model="form.startWage"
                                  style="width: 140px; margin-left: 15px; margin-right: 15px;"/>
                        -
                        <el-input placeholder="最高" v-model="form.endWage"
                                  style="width: 140px; margin-left: 15px; margin-right: 15px;"/>
                        <span>元/{{form.wageType === '月薪' ? '月': '年'}}</span>
                    </el-form-item>
                    <el-form-item required label="工作地点">
                        <el-tag
                                :key="tag"
                                style="margin-right: 10px;"
                                v-for="tag in workplace"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                            {{tag}}
                        </el-tag>
                        <div v-if="showcity">
                            <Areas @addresschange="addresschange"/>
                        </div>
                        <el-button v-else-if="workplace.length === 0" class="button-new-tag" size="small" @click="showInput">+ 城市</el-button>

                    </el-form-item>
                    <el-form-item label="职位" prop="position">
                        <el-input placeholder="请输入" v-model="form.position" style="width: 400px"/>
                    </el-form-item>
                    <el-form-item required label="行业">
                        <el-tag
                                :key="tag"
                                style="margin-right: 10px;"
                                v-for="tag in industry"
                                closable
                                :disable-transitions="false"
                                @close="industryClose(tag)">
                            {{tag}}
                        </el-tag>
                      <div v-if="industry.length < 3">
                          <el-cascader  style="width: 60%" :options="hangyelist" @change="industryChange" placeholder="请选择行业" v-model="industryvalue" clearable
                                        :show-all-levels="false" :props="{value: 'name', label: 'name', children: 'contentSet'}"></el-cascader>
                      </div>

                    </el-form-item>
                    <el-form-item required label="工作类型">
                        <el-select v-model="form.workType" placeholder="请选择工作类型 ">
                            <el-option label="兼职" value="兼职"></el-option>
                            <el-option label="全职" value="全职"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item style="margin-top: 40px">
                        <el-button style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
                                   type="primary" @click="onSubmit">保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import { JobIntentAdd, JobIntentUpdate, JobIntent, OccupationType, CVJobIntentById } from '../../assets/js/domains'
import Areas from '../../components/area'

export default {
  name: 'PersonYixiangAdd',
  components: {
    Personleft,
    Memtitle,
    Areas
  },
  directives: {},
  data: function () {
    return {
      form: {},
      rules:{
        position:[
          { required: true, message: '请输入职位', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }],
      },
      workplace: [],
      industry: [],
      hangyelist: [],
      hangyeLoading: true,
      showindustry: false,
      showcity: false,
      industryvalue: []
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  computed: {},
  mounted: function () {
    this.form.userUid = localStorage.getItem('md_user_uid')
    this.getOccupationType()
    // this.getJobIntent()
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getCVJobIntentById()
    }
  },
  methods: {
    getCVJobIntentById: function () {
      const _this = this
      CVJobIntentById({ id: this.form.id }).then(function (res) {
        if (res.code === 200) {
          _this.form = res.data
          _this.workplace = res.data.workplace.split(',')
          _this.industry = res.data.industry.split(',')
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    industryClose: function (tag) {
      this.industry.splice(this.industry.indexOf(tag), 1)
    },
    btnindustry: function () {
      this.showindustry = true
    },
    industryChange: function (e) {
      if (this.industry.indexOf(e) < 0) {
        this.industry.push(e[1])
      }
      this.industryvalue = []
    },
    handleClose: function (tag) {
      this.workplace.splice(this.workplace.indexOf(tag), 1)
    },
    showInput: function () {
      this.showcity = true
    },
    addresschange: function (e) {
      if (e.cityName && this.workplace.indexOf(e.cityName) < 0) {
        this.workplace.push(e.cityName)
        this.showcity = false
      }
    },
    onSubmit(){
      this.$refs.form.validateField('position', valid => {
        if(valid !== ''){
          return
        }
        this.submitForm();
      })
    },
    submitForm() {
      const _this = this
      if (!this.form.startWage || !this.form.endWage) {
        this.$message.error('请输入期望薪资')
        return
      }
      if (!this.form.position) {
        this.$message.error('请输入职位')
        return
      }
      if (!this.workplace.length) {
        this.$message.error('请选择工作地点')
        return
      }
      if (!this.industry.length) {
        this.$message.error('请选择行业')
        return
      }
      if (!this.form.workType) {
        this.$message.error('请选择工作类型')
        return
      }
      this.form.workplace = ''
      if (this.workplace.length > 0) {
        for (let i = 0; i < this.workplace.length; i++) {
          if (i === 0) {
            this.form.workplace = this.workplace[i]
          } else {
            if (this.form.workplace == '') {
              this.form.workplace = this.workplace[i]
            } else {
              this.form.workplace = this.form.workplace + ',' + this.workplace[i]
            }
          }
        }
      }
      if (this.industry.length > 0) {
        for (let i = 0; i < this.industry.length; i++) {
          if (i === 0) {
            this.form.industry = this.industry[i]
          } else {
            if (this.form.industry == '') {
              this.form.industry = this.industry[i]
            } else {
              this.form.industry = this.form.industry + ',' + this.industry[i]
            }
          }
        }
      }
      this.form.approval = '1'
      if (this.form.id) {
        JobIntentUpdate(this.form).then(function (res) {
          if (res.code === 200) {
            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                window.location.href = 'personInfo.html#/yixiang'
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
          }
        })
      } else {
        JobIntentAdd(_this.form).then(function (res) {
          if (res.code === 200) {
            _this.$alert('添加成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                window.location.href = 'personInfo.html#/yixiang'
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
          }
        })
      }
    },
    getJobIntent: function () {
      const _this = this
      JobIntent({ user_uid: this.form.userUid }).then(function (res) {
        if (res.code === 200) {
          if (res.data) {
            _this.form = res.data
            _this.workplace = []
            if (res.data.workplace) {
              _this.workplace = res.data.workplace.split(',')
            }
            _this.industry = []
            if (res.data.industry) {
              _this.industry = res.data.industry.split(',')
            }
          }
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getOccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        _this.hangyeLoading = false
        if (res.code === 200) {
          _this.hangyelist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/member";
</style>
